<template>
    <Modal title="照片检索" v-model="show" @on-cancel="cancel">
        <Upload type="drag" accept="image/png, image/jpeg, image/jpg" action="" :beforeUpload="handleBeforeUpload">
            <div style="padding: 20px 0">
                <div :style="{'display': get_visible_state(state)}">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或者拖曳文件到此处上传</p>
                </div>
                <div :style="{backgroundImage:img_src_back,display:get_visible_state(!state)}" style="height: 100%;width: 100%;background-size: auto 100%;background-repeat: no-repeat;background-position: center top;" >
                    <div style="padding: 60%"></div>
                </div>
            </div>
        </Upload>
        <div slot="footer">
            <Button type="primary" @click="handleSubmit">点击搜索</Button>
        </div>
    </Modal>

</template>

<script>


    import ImageUtils from "@/libs/image.js";
    import Constants from "@/libs/constants.js"

    export default {
        name: "serach-by-pic",
        props:{
            callback:{
                type:Function,
                default:()=>{}
            }
        },
        data() {
            return {
                show: false,
                state: true,
                img_src:"",
            }
        },
        computed:{
            img_src_back:function () {
                return `url('${this.img_src}')`
            }
        },
        methods: {
            get_visible_state(state) {
                if (state) {
                    return ''
                } else {
                    return 'none'
                }
            },
            handleBeforeUpload(file) {
                let _this = this
                ImageUtils.compress(file, {
                    compress: {
                        width: 480,
                        height: 640,
                        quality: 0.8,
                    },
                    type: 'file'
                }, (res,w,h) => {
                    // if (res) {
                    //     this.$emit("fileAdd",res,w,h)
                    // }
                    // //上传完成
                    // if(index == oFiles.length -1){
                    //     _this.$refs['input'].value=""
                    // }
                    var reader = new FileReader();
                    reader.readAsDataURL(res);
                    reader.onloadend = function() {
                        _this.img_src = reader.result;
                        _this.state = false
                    }

                })
                return false
            },
            showIt(){
                this.show = true
                this.state = true
                this.img_src = ""
            },
            handleSubmit(){
                if(this.img_src){
                    this.callback(this.img_src.split(',')[1])
                    this.show = false
                }else{
                    this.$Message.error("请选择照片")
                }
            },
            cancel(){
                this.state = true
                this.img_src = ""
            }
        }

    }
</script>

<style scoped>

</style>